<template>
  <div>
    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="../assets/images/logo.png" alt="" />
      </a>

      <div class="search_con fl">
        <input class="input_text fl" v-model="name" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="select" />
      </div>

      <div class="guest_cart fr">
        <a href="/shop_cart" class="cart_name fl">我的购物车</a>
        <div class="goods_count fl">{{count}}</div>
      </div>
    </div>

    <div class="navbar_con">
      <div class="navbar clearfix">
        <div class="subnav_con fl">
          <h1>全部商品分类</h1>
          <span></span>
          <ul class="subnav fl">
            <li v-for="c in categoryArr">
              <a href="javascript:void(0)" :class="c.cls" @click="set(c.id)">{{c.name}}</a>
            </li>
          </ul>
        </div>

        <ul class="navlist fl">
          <li><a href="/">首页</a></li>
          <li class="interval">|</li>
          <li><a href="/">手机生鲜</a></li>
          <li class="interval">|</li>
          <li><a href="/">抽奖</a></li>
        </ul>
      </div>
    </div>

    <div class="breadcrumb">
      <a href="/list">全部分类</a>
      <span>&gt;</span>
      <a :href="'/list?categoryId=' + categoryId">{{cname}}</a>
    </div>

    <div class="main_wrap clearfix">
      <div class="l_wrap fl clearfix">
        <div class="new_goods">
          <h3>新品推荐</h3>

          <ul>
            <li v-for="recommend in recommends">
              <a href="javascript:void(0)">
                <img :src="recommend.image" alt="" />
              </a>
              <h4><a href="javascript:void(0)">{{recommend.name}}</a></h4>
              <div class="prize">￥{{recommend.price}}</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="r_wrap fr clearfix">
        <div class="sort_bar">
          <a href="javascript:void(0)" :class="parseInt(tabIndex) === 0 ? 'active' : ''" @click="setTab(0)">默认</a>
          <a href="javascript:void(0)" :class="parseInt(tabIndex) === 1 ? 'active' : ''" @click="setTab(1)">价格</a>
          <a href="javascript:void(0)" :class="parseInt(tabIndex) === 2 ? 'active' : ''" @click="setTab(2)">人气</a>
        </div>

        <ul class="goods_type_list clearfix">
          <li v-for="product in products">
            <a href="javascript:void(0)" @click="showDetail(product.id)">
              <img :src="product.image" alt="" />
            </a>

            <h4><a href="javascript:void(0)" @click="showDetail(product.id)">{{product.name}}</a></h4>

            <div class="operate">
              <span class="prize">￥{{product.price}}</span>
              <span class="unit">{{product.price}}/{{product.unit}}</span>
              <a href="javascript:void(0)" class="add_goods" title="加入购物车" @click="toCart(product.id)"></a>
            </div>
          </li>
        </ul>

        <div class="pagenation">
          <el-pagination background
             layout="total, sizes, prev, pager, next, jumper"
             @current-change="handleCurrentChange"
             @size-change="handleSizeChange"
             :hide-on-single-page="value"
             :page-sizes="pageSizes"
             :current-page="page"
             :page-size="size"
             :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {error, getData, postForm} from "@/assets/js/axiosUtis";
  export default {
      data() {
          return {

          }
      },
      created() {

      },
      methods: {

      },
      name: "ListView",
  }
</script>